<template>
  <div class="swiper">
    <div class="back">
      <img src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
      <div class="u-text">严选好物&nbsp;用心生活</div>
    </div>
    <div class="m-swiper">
      <div class="u-wrapper">
        <div class="u-group" v-for="item in navList" :key="item.id">
          <img :src="item.picUrl" alt="">
          <div class="u-item">
            <h1>{{item.mainTitle}}</h1>
            <span>{{item.viceTitle}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import url from '@/api/url'
export default {
  data () {
    return {
      navList: []
    }
  },
  created () {
    // 初始化请求数据
    this.$http.get(url.getBuyingNavWap)
      .then((res) => {
        // console.log(res)
        this.navList = res.data.navList
      })
  }
}
</script>

<style lang='less' scoped>
.swiper{
  margin-top: 46px;
  height: 6.9rem;
  position: relative;
  .back{
    position: relative;
    z-index: 1;
    height: 5.18rem;
    background-image: url(http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView);
    background-size: 7.5rem 5.18rem;
    img{
      width: 1.3rem;
      position: absolute;
      top: .6rem;
      left: .12rem;
      z-index: 2;
    }
    div{
      font-size: .3rem;
      line-height: .44rem;
      height: .44rem;
      position: absolute;
      font-family: PingFangSC-Regular;
      left: 1.46rem;
      top: .79rem;
      color: #fff;
    }
  }
  .m-swiper{
    width: 7.1rem;
    height: 5.4rem;
    margin: 0 auto;
    border-radius: .2rem;
    background-color: #fff;
    position: absolute;
    top: 1.5rem;
    left: .2rem;
    z-index: 2;
    overflow-x: auto;
    .u-wrapper{
      width: 14.5rem;
      display: flex;
      flex-wrap: wrap;
      .u-group{
        width: 1.68rem;
        margin: .3rem .05rem 0;
        overflow: hidden;
        text-align: center;
        img{
          width: 1.2rem;
          height: 1.2rem;
          margin: 0 auto;
        }
      }
      .u-item{
        span{
          font-size: .2rem;
          color: #999;
        }
      }
    }
  }
}
</style>
